<template>
  <div>
    <div ref="airspaceCheckRef" v-if="visible" class="air-space" :style="{
      right: rightAsideTableVisible ? '380px' : '0'
    }">
      <!-- todo 禁飞区 -->
      <el-checkbox-group v-model="showAirSpaceTypes">
        <el-checkbox
          :key="airSpaceType[0]?.value"
          :label="airSpaceType[0]?.label"
          :value="airSpaceType[0]?.value"
          style="--el-checkbox-text-color: #fff"
        >
          <!-- <img src="../../assets/images/card-icon.png" alt="" /> -->
          <img
            class="icon"
            :class="{ 'active-icon': showAirSpaceTypes.includes(1) }"
            :src="
              showAirSpaceTypes.includes(1) ? activeNoFlyingIcon : noFlyingIcon
            "
            alt=""
          />
          {{ airSpaceType[0]?.label }}
          <!-- {{ showAirSpaceTypes }} -->
        </el-checkbox>
        <el-checkbox
          :key="airSpaceType[1]?.value"
          :label="airSpaceType[1]?.label"
          :value="airSpaceType[1]?.value"
          style="--el-checkbox-text-color: #fff"
        >
          <img
            class="icon"
            :class="{ 'active-icon': showAirSpaceTypes.includes(2) }"
            src="../../assets/images/limited-height.png"
            alt=""
          />
          {{ airSpaceType[1]?.label }}
        </el-checkbox>
        <el-checkbox
          :key="airSpaceType[2]?.value"
          :label="airSpaceType[2]?.label"
          :value="airSpaceType[2]?.value"
          style="--el-checkbox-text-color: #fff"
        >
          <img
            class="icon"
            :class="{ 'active-icon': showAirSpaceTypes.includes(3) }"
            src="../../assets/images/empower.png"
            alt=""
          />
          {{ airSpaceType[2]?.label }}
        </el-checkbox>
        <el-checkbox
          :key="airSpaceType[3]?.value"
          :label="airSpaceType[3]?.label"
          :value="airSpaceType[3]?.value"
          style="--el-checkbox-text-color: #fff"
        >
          <img
            class="icon"
            :class="{ 'active-icon': showAirSpaceTypes.includes(4) }"
            src="../../assets/images/warning.png"
            alt=""
          />
          {{ airSpaceType[3]?.label }}
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <!-- 空域 -->
    <template v-if="showAirSpaces.length > 0">
      <AirSpace
        v-for="(airSpace, index) in showAirSpaces"
        :key="`airSpace-${index}`"
        :data="airSpace"
        @change="handleChange"
      />
    </template>

    <!-- 绘制空域 -->
    <Drawings ref="drawings" @change="handleChange" />
  </div>
</template>

<script setup>
import noFlyingIcon from "../../assets/images/no-flying-icon.png";
import activeNoFlyingIcon from "../../assets/images/active-no-flying-icon.png";
import { ref, toRefs, watch, inject, nextTick, onMounted } from "vue";
import { ElMessage } from "element-plus";
import api from "@/api";

import AirSpace from "./AirSpace.vue";
import Drawings from "./Drawings.vue";

const props = defineProps({
  visible: Boolean,
  leftSpace: Boolean,
});

const { visible } = toRefs(props);
const { leftSpace } = toRefs(props);
// 选择不同类型dom
const airspaceCheckRef = ref(null);

const drawings = ref(null);
// 空域类型
const airSpaceType = ref([]);
// 空域数据
const airSpaces = ref([]);
// 显示的空域类型
const showAirSpaceTypes = ref([]);
// 显示的空域
const showAirSpaces = ref([]);

watch(visible, (newValue, oldValue) => {

  if (newValue) {
    getAirSpaceType();
    getAirSpace();
  } else {
    airSpaceType.value = [];
    airSpaces.value = [];
    showAirSpaces.value = [];
  }
});

// onMounted(() => {
//   watch(leftSpace, (newValue, oldValue) => {
//     console.log("newValue", newValue);
//     if (newValue) {
//       airspaceCheckRef.value.style.left = "71%";
//       console.log("flag", airspaceCheckRef.value.style.left);
//     } else {
//       airspaceCheckRef.value.style.left = "97%";
//     }
//   });
// });

watch(
  showAirSpaceTypes,
  (newValue, oldValue) => {
    if (newValue.length > 0) {
      showAirSpaces.value = airSpaces.value.filter((item) => {
        return newValue.includes(item.airspaceType);
      });
    } else {
      showAirSpaces.value = [];
    }
  },
  { deep: true }
);

const handleChange = (type, val) => {
  if (type === "remove") {
    if (visible.value) {
      airSpaces.value = airSpaces.value.filter((item) => item.id !== val.id);
    }
  } else if (type === "add") {
    if (visible.value) {
      airSpaces.value = [...airSpaces.value, val];
    }
  }
  if (visible.value) {
    showAirSpaces.value = airSpaces.value.filter((item) => {
      return showAirSpaceTypes.value.includes(item.airspaceType);
    });
  }
};

const getAirSpaceType = async () => {
  const result = await api.getAirSpaceType();
  if (result.code === 200) {
    airSpaceType.value = result.data || [];
  } else {
    ElMessage.error(result.msg || "服务器忙，请稍后重试！");
  }
};
// 获取空域数据
const getAirSpace = async () => {
  const result = await api.getAirSpace();
  if (result.code === 200) {
    airSpaces.value = (result.data || []).map((item) => ({
      ...item,
      points: JSON.parse(item.points),
    }));
  } else {
    ElMessage.error(result.msg || "服务器忙，请稍后重试！");
  }
};

// 暴露添加航路操作
defineExpose({
  handleDrawingSpace: (type) => {
    drawings.value.handleDrawingSpace(type);
  },
  // 网格是否启用的flag
  switchTopStyle: (flag) => {
    if (airspaceCheckRef.value) {
      airspaceCheckRef.value.style.top = flag ? "34px" : 0;
    }
  },
});

const rightAsideTableVisible = inject('rightAsideTableVisible')
</script>

<style scoped lang="scss">
.air-space {
  text-align: center;
  position: absolute;
  top: 3% !important;
  // background: rgba(2, 35, 51, 0.749);
  z-index: 11;
  padding: 0 12px;
  right: 0px ;
  border-end-start-radius: 32px;
  border-end-end-radius: 32px;

  .el-checkbox-group {
    display: flex;
    flex-direction: column;
    .icon {
      width: 3vw;
    }
  }
  .el-checkbox {
    height: 80px;
    margin-right: 0;
    --el-checkbox-checked-text-color: rgba(0, 252, 255, 1) !important;
    --el-checkbox-text-color: rgba(148, 206, 255, 1) !important;
  }
  ::v-deep .el-checkbox__label {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    // color: rgba(148, 206, 255, 1);
  }
  ::v-deep .el-checkbox__input {
    opacity: 0;
  }
}
</style>
